import 'https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js'; //引入jquery模块
import 'https://cdn.bootcdn.net/ajax/libs/jquery.lazyload/1.9.1/jquery.lazyload.min.js';//引入jquery懒加载插件

class Index1{
  constructor(){

  }
  init(){
    this.lazy();
    this.louti();
    this.lunbo();
  }
  lazy(){
        $.ajax({
            url:'http://localhost/my-wangyi/backend/taobao.php',
            dataType:'json'
          }).then(function(resData){
            let htmlStr = ""; 
            $.each(resData,function(index,value){
                if(index==0){
                        htmlStr +=
                         `
                        <dl class="mod2-2_main1">
                        <a href="detail.html?sid=${value.sid}">
                            <dt><img data-original="${value.url}" class="lazy" alt=""></dt>
                            <dd class="dd1">${value.title}</dd>
                            <dd class="dd2"><div> ￥${value.price}<span>￥12</span></div></dd>
                            </a>
                        </dl>
                        `;
                    
                }
                if(index<7&&index!=0){
                        htmlStr +=
                        `
                       <dl class="mod2-2_main2">
                       <a href="detail.html?sid=${value.sid}">
                           <dt><img data-original="${value.url}" class="lazy" alt=""></dt>
                           <dd class="dd1">${value.title}</dd>
                           <dd class="dd2"><div> ￥${value.price}<span>￥12</span></div></dd>
                           </a>
                       </dl>
                       `;
                }
            });
            $('.mod2-2_main').html(htmlStr);
            $("img.lazy").lazyload({
              effect : "slideDown"
            });
      
          });
  }

  louti(){

        $(window).on('scroll',function(){
            let top = $(window).scrollTop();
            if(top>=608){
                $(".list").attr("style","position:fixed;left:0px;");
            }else{
                $(".list").attr("style","");
            }


           //楼梯对应的位置
            $('.mid>div').each(function(index,element){
                let loucentTop = $(element).offset().top;
                
                if(loucentTop>=top){
                    // console.log(loucentTop);
                    let mos=document.querySelector(".list").children;
                    console.log(mos);
                    $(mos).eq(index).attr('style',"background-color: #d1a065;").siblings().attr('style',"");
                    return false;
                }
            });
        });
        $('.list li').not('.list1').on('click',function(){
            $(window).off();//关闭
            $(this).attr('style',"background-color: #d1a065;").siblings().attr('style',"");
            let loucengTop = $('.mid>div').eq($(this).index()).offset().top;
            $('html').animate({
                scrollTop:loucengTop
            },function(){//开启
                $(window).on('scroll',function(){
                    let top = $(window).scrollTop();
                    if(top>=608){
                        $(".list").attr("style","position:fixed;left:0px;");
                    }else{
                        $(".list").attr("style","");
                    }
        
        
                   //楼梯对应的位置
                    $('.mid>div').each(function(index,element){
                        let loucentTop = $(element).offset().top;
                        
                        if(loucentTop>=top){
                            // console.log(loucentTop);
                            let mos=document.querySelector(".list").children;
                            console.log(mos);
                            $(mos).eq(index).attr('style',"background-color: #d1a065;").siblings().attr('style',"");
                            return false;
                        }
                    });
                });
            });
            
            
        })
  }
  lunbo(){
    let _this = this;
    this.index = 0;
    this.liWidth = $('.mod11>div').eq(0).width();
    let liLength = $('.mod11>div').length;
    $('.button_right').on('click',()=>{
        this.index++;
        this.change();
      });

      $('.button_left').on('click',()=>{
        this.index--;
        this.change();
      });
      let fn=setInterval(()=>{
        this.index++;
        this.change();
      },3000)

          $('.mod11-j').hover(
      ()=>{
        clearInterval(fn);
      },
      () =>{
        fn=setInterval(()=>{
            this.index++;
            this.change();
          },3000)
      }
    )

  }
  change(){

      if(this.index === $('.mod11 .mods1').length ){
        $('.mod11').css('left',0);
        this.index = 0;
      }
      if(this.index === -1){
        $('.mod11').css('left',-this.liWidth * ($('.mod11 .mods1').length)+'px');
        this.index = $('.mod11 .mods1').length -2;
      }
      
      $('.mod11 .mods1').eq(this.index).addClass('active').siblings().removeClass('active');
      $('.mod11').stop(true).animate({
        left:-this.liWidth*this.index
      },200);
     console.log(this.index);
  }
}

export{
  Index1
}